<template>
  <div class="layout-col bs flex1">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
        <span class="f15 fw ml8">重点配电房基本信息</span>
      </div>
    </div>
    <div class="flex1" v-if="publicStore._public && publicStore._public.importantStation">
      <div class="pplr4 ppt4 f16 fw">{{publicStore._public.importantName?publicStore._public.importantName : ''}}</div>
      <div class="pplr4 ppt3 flex-sc">
        <span class="w100">所属范围：</span>
        <span>{{publicStore._public.area?publicStore._public.area: ''}}</span>
      </div>
      <div class="pplr4 ppt3 flex-sc">
        <span class="w100">设备总数：</span>
        <span>
          {{publicStore._public.star && publicStore._public.star.sensor_count?publicStore._public.star.sensor_count : 0}}
        </span>
      </div>
      <div class="pplr4 ppt3 flex-sc">
        <span class="w100">设备状态：</span>
        <span>
          在线率<span class="ml5">{{publicStore._public.star && publicStore._public.star.online_count?
            (Math.round((publicStore._public.star.online_count/publicStore._public.star.sensor_count)*10)/10)*100 : 0}}%</span>
          <span class="mlr20"></span>
          异常率<span class="ml5">{{publicStore._public.star && publicStore._public.star.alarm_count?
            (Math.round((publicStore._public.star.alarm_count/publicStore._public.star.sensor_count)*10)/10)*100 : 0}}%</span>
        </span>
      </div>
      <div class="pplr4 ppt3 flex-sc">
        <span class="w100">环境状态：</span>
        <span :class="publicStore._public.env && publicStore._public.env.alarm_count > 0?'i9':'i21'">
          {{publicStore._public.env && publicStore._public.env.alarm_count > 0?'异常':'正常'}}
        </span>
      </div>
    </div>
    <!-- 主摄像头 -->
    <div class="flex2 flex-col-cb ww100 bodt-i20-1 hidden pp4 mmt4" v-if="publicStore._public && publicStore._public.importantStation">
      <div class="ppb4">主摄像头</div>
      <Video class="flex1" />
    </div>
    <div class="flex-cc ww100 hh100" v-if="isNull(publicStore._public.importantStation)">未 配 置</div>
  </div>
</template>

<script lang="ts" setup>
	import Video from '@/components/Video'
	const { proxy }:any = getCurrentInstance()
	const publicStore = proxy.publicStore()
	const state = reactive({
	  ...publicStore.$state,
	})
</script>

<style scoped lang="scss">

</style>
